<script setup lang="ts">
import { useCountDown } from '@vant/use'
import ActivityDialogAlert from './ActivityDialogAlert.vue'

defineProps(['show'])
const emits = defineEmits(['changeShowActivityDialog'])

const alertProps = reactive({
  show: false,
})

function initCountDown(item: any) {
  item.countDown = useCountDown({
    time: 1000 * 60 * 60 * 24,
    onFinish: () => {
      // TODO 刷新数据
    },
  })
  item.countDown.start()
}

const activetyList: any = ref([
  {
    id: 1,
    img: '/images/home/activity/Check-in_award.png',
    icon: '/images/user/vipSignIn_0.png',
    title: $t('home.activity_dialog_item_1_title'),
    btn_text: $t('home.activity_dialog_item_1_btn_text'),
    routeName: 'activity-checkin',
  },
  {
    id: 2,
    img: '/images/home/activity/Convite_award.png',
    title: $t('home.activity_dialog_item_2_title'),
    desc: $t('home.activity_dialog_item_2_desc', [`${apo.user.currency_symbol} 0,00`]), // TODO
    btn_text: `${$t('home.activity_dialog_item_2_btn_text')}`,
    routeName: 'activity-vip',
  },
  {
    id: 3,
    img: '/images/home/activity/Acumulada_award.png',
    title: $t('home.activity_dialog_item_3_title'),
    btn_text: $t('home.activity_dialog_item_3_btn_text'),
    disabled: false,
    openDialog: true,
    showTime: false,
    countDown: {},
  },
  {
    id: 4,
    img: '/images/home/activity/Box_01_Award.png',
    title: $t('home.activity_dialog_item_4_title'),
    btn_text: $t('home.activity_dialog_item_4_btn_text'),
    disabled: true,
    openDialog: true,
    showTime: true,
    countDown: {},

  },
  {
    id: 5,
    img: '/images/home/activity/Box_02_Award.png',
    title: $t('home.activity_dialog_item_5_title'),
    desc: $t('home.activity_dialog_item_5_desc'),
    btn_text: $t('home.activity_dialog_item_5_btn_text'),
    disabled: true,
    openDialog: true,
    showTime: false,
    countDown: {},
  },
  {
    id: 6,
    img: '/images/home/activity/Box_03_Award.png',
    title: $t('home.activity_dialog_item_6_title'),
    desc: $t('home.activity_dialog_item_6_desc'),
    btn_text: $t('home.activity_dialog_item_6_btn_text'),
    disabled: true,
    openDialog: true,
    showTime: false,
    countDown: {},
  },
])

activetyList.value.forEach((item: any) => {
  if (item.showTime)
    initCountDown(item)
})

function toVip() {
  navigateTo({ name: 'activity-vip' })
  beforeClose()
}

function toActivity(item: any) {
  if (item.disabled || item.showTime) {
    return false
  } else if (item.routeName) {
    navigateTo({ name: item.routeName })
    beforeClose()
  } else if (item.openDialog) {
    alertProps.show = true
  }
}

function beforeClose() {
  emits('changeShowActivityDialog', false)
}
const route = useRoute()
watch(
  () => route.name,
  () => {
    beforeClose()
  },
)

// TODO 获取数据
function initConfig() {

}
</script>

<template>
  <van-dialog
    :show="show"
    :title="$t('home.activity_dialog_title')"
    destroy-on-close
    class-name="custom-dialog"
    teleport="body"
    :show-confirm-button="false"
    :show-cancel-button="true"
    @open="initConfig"
    @cancel="beforeClose"
  >
    <div class="BonusCabinetPop">
      <div class="pop">
        <Placeholder v-if="!activetyList.length" />
        <div v-for="item in activetyList" :key="item.id" class="item">
          <div class="left">
            <NuxtImg :src="item.img" />
            <div class="txt" :class="{ imgTxt: item.icon }">
              <p>{{ item.title }}</p>
              <NuxtImg v-if="item.icon" :src="item.icon" />
              <p v-else>
                {{ item.desc }}
              </p>
            </div>
          </div>
          <div class="btn2 checkIn1" :class="{ disabled: item.disabled || item.showTime }" @click="toActivity(item)">
            <div v-if="item.showTime" class="time-btn">
              <img src="/images/home/head/Icon_Gift_01 1.png" alt="">
              <span>{{ pad2(item.countDown?.current?.hours) }}:</span>
              <span>{{ pad2(item.countDown?.current?.minutes) }}:</span>
              <span>{{ pad2(item.countDown?.current?.seconds) }}</span>
            </div>
            <div v-else>
              {{ item.btn_text }}
            </div>
          </div>
        </div>
      </div>
      <div v-click-move class="link-btn" @click="toVip">
        {{ $t('home.activity_dialog_item_7_btn_text') }}
      </div>
      <div class="vipLevelBonusBox">
        <div class="vipLevelBonus">
          <div class="left">
            <p class="title">
              {{ $t('home.activity_dialog_item_8_btn_text') }}
            </p>
            <div class="ProgressBar">
              <div style="width: 20%;" />
            </div>
            <p class="ProgressBartTxt">
              <span style="color: #FFD700;">{{ apo.user.currency_symbol }} 0,00</span> / {{ apo.user.currency_symbol }} 10,00
            </p>
          </div><div class="rit">
            <img src="/images/user/vipSignIn_0.png" alt="" class="vipImg">
            <div v-click-move class="btn" :class="{ disabled: false }" @click="alertProps.show = true">
              <div>
                <img src="/images/home/head/Icon_Gift_01 2.png" alt=""><span>{{ $t('home.activity_dialog_item_9_btn_text') }}</span>
              </div><div>
                {{ apo.user.currency_symbol }} 0,25
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <ActivityDialogAlert :show="alertProps.show" @close="alertProps.show = false" @success="initConfig" />
  </van-dialog>
</template>

<style scoped lang="scss">
.BonusCabinetPop {
  position: relative;
  z-index: 1;
  padding-bottom: 0.3rem;

  .pop {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    transition: 0.2s all ease;
    padding: 0.25rem;

    .item {
      width: 100%;
      box-sizing: border-box;
      display: grid;
      grid-template-columns: 2fr auto;
      align-items: center;
      height: 1.5rem;
      min-height: 1.5rem; // 添加最小高度
      flex-shrink: 0; // 防止被压缩
      background: #2c1d31;
      border-radius: 0.2rem;
      position: relative;
      padding: 0 0.2rem;

      &:after {
        content: '';
        display: block;
        height: 0.03rem;
        position: absolute;
        bottom: -0.1rem;
        left: 0;
        right: 0;
      }

      &:nth-child(1) .btn2 {
        background: #fdd528 !important;
        color: #3a1d33 !important;
      }
      &:nth-child(2) .btn2 {
        background: #2ecc71 !important;
        color: #fff !important;
      }

      .left {
        display: flex;
        align-items: center;

        img {
          width: 1rem;
          flex-shrink: 0; // 防止图片被压缩
        }

        .txt {
          color: var(--theme-neutral1);
          display: flex;
          flex-direction: column;
          margin-left: 0.2rem;
          flex-shrink: 1; // 允许文本区域收缩

          p {
            font-size: 0.38rem;
            display: flex;
            align-items: center;
            margin: 0; // 重置默认边距

            &:nth-child(2) {
              font-size: 0.28rem;
              color: #8e6899;
              opacity: 0.8;
            }
          }
        }

        .imgTxt {
          display: flex;
          flex-direction: row;
          align-items: center;

          p {
            color: var(--theme-neutral1);
            font-size: 0.38rem;
            margin: 0; // 重置默认边距
          }

          img {
            width: 1rem;
            margin-left: 0.1rem;
            flex-shrink: 0; // 防止图标被压缩
          }
        }
      }

      .btn2 {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        position: relative;
        width: 2.8rem;
        height: 0.8rem;
        min-height: 0.8rem; // 添加最小高度
        flex-shrink: 0; // 防止按钮被压缩
        border-radius: 0.5rem;
        box-sizing: border-box;
        font-size: 0.34rem;
        &.checkIn1 {
          font-weight: 700;
          background-color: #f27dc5;
          color: #fff;
          &.disabled {
            background: #3f294e;
            color: #7b5a85;
          }
          .time-btn {
            color: #adebff;
            display: flex;
            align-items: center;
            img {
              width: 0.36rem;
              margin-right: 0.1rem;
              margin-top: -0.04rem;
            }
          }
        }
      }
    }
  }

  .link-btn {
    color: #f27dc5;
    font-size: 0.38rem;
    text-align: center;
    margin-bottom: 0.3rem;
  }
  .vipLevelBonusBox {
    padding: 0 0.25rem;
    margin-top: 0.3rem;
    .vipLevelBonus {
      width: 100%;
      height: 2.45rem;
      background: #2c1d31;
      border-radius: 0.2rem;
      padding: 0.24rem 0.16rem 0.16rem 0.24rem;
      display: flex;
      justify-content: space-between;
    }
    .left .title {
      margin-bottom: 0.47rem;
      color: var(--theme-neutral1);
      font-size: 0.38rem;
    }
    .left .ProgressBar {
      width: 4.95rem;
      height: 0.2rem;
      background: #413645;
      border-radius: 1rem;
    }
    .left .ProgressBar div {
      background: #fdd528;
      height: 100%;
      width: 0;
      border-radius: 1rem;
    }
    .left .ProgressBartTxt {
      margin-top: 0.27rem;
      color: #b499bc;
      font-size: 0.3rem;
      text-align: center;
    }
    .rit {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.28rem;
    }
    .rit .vipImg {
      width: 0.8rem;
    }
    .rit .btn {
      position: relative;
      width: 2.8rem;
      height: 1rem;
      background-color: var(--theme-dec4);
      border-radius: 0.2rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: var(--theme-dec3);
      gap: 0.1rem;
      font-size: 0.34rem;
      font-weight: 700;
      overflow: hidden;
      margin-top: -0.15rem;
      &.disabled {
        background: var(--theme-neutral4);
      }
    }
    .rit .btn div {
      display: flex;
      gap: 0.1rem;
      align-items: center;
      height: 0.34rem;
      color: #3a1d33;
    }
    .rit .btn div img {
      width: 0.4rem;
      margin-top: -0.04rem;
    }
  }
}
</style>
